<template>
  <div class="box">
    <!-- 容器元素，包含 NestedMenu 组件 -->
    <div class="container">
      <!-- 渲染 NestedMenu 组件，并传递菜单数据 -->
      <NestedMenu :menu-data="menuData" />
    </div>
  </div>
</template>

<script setup lang="ts">
import NestedMenu from "./components/NestedMenu.vue";
import { ref } from "vue";
import type { MenuItemType } from "./components/types";

const menuData = ref<MenuItemType[]>([
  {
    id: 1,
    title: "一厂",
    children: [
      {
        id: 2,
        title: "综合看板",
        children: [
          { id: 3, title: "经营看板" },
          { id: 4, title: "实时生产" },
          { id: 5, title: "设备状态看板" },
          { id: 6, title: "质量监控" },
          { id: 7, title: "物料库存" },
          { id: 8, title: "环境检测" },
          { id: 9, title: "订单排产计划" },
        ],
      },
      {
        id: 10,
        title: "产线",
        children: [
          { id: 11, title: "9#1F" },
          { id: 12, title: "10#1F" },
          { id: 13, title: "10#2F" },
        ],
      },
    ],
  },
  {
    id: 14,
    title: "二厂",
    children: [
      {
        id: 15,
        title: "综合看板",
        children: [
          { id: 16, title: "经营看板" },
          { id: 17, title: "实时生产" },
          { id: 18, title: "设备状态看板" },
          { id: 19, title: "质量监控" },
          { id: 20, title: "物料库存" },
          { id: 21, title: "环境检测" },
          { id: 22, title: "订单排产计划" },
        ],
      },
      {
        id: 23,
        title: "产线",
        children: [
          {
            id: 24,
            title: "35#2F",
            children: [
              {
                id: 25,
                title: "工序",
                children: [
                  { id: 26, title: "生产" },
                  { id: 27, title: "设备" },
                  { id: 28, title: "人员" },
                  { id: 29, title: "环境" },
                  { id: 30, title: "文件" },
                  { id: 31, title: "看板" },
                  { id: 32, title: "报表" },
                ],
              },
            ],
          },
          { id: 33, title: "35#4F" },
          { id: 34, title: "38#1F" },
          { id: 35, title: "38#2F" },
          { id: 36, title: "38#3F" },
          { id: 37, title: "39#1F" },
          { id: 38, title: "39#2F" },
          { id: 39, title: "39#3F" },
          { id: 40, title: "40#1F" },
          { id: 41, title: "40#2F" },
          { id: 42, title: "40#3F" },
        ],
      },
    ],
  },
]);
</script>

<style>
/* 容器的样式，设置内边距为 30px */
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 97vh;
  display: flex;
}
.container {
  width: 220px;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  box-shadow: 4px 0 6px rgba(0, 0, 0, 0.2); /* 添加右侧阴影 */
}

/* 自定义滚动条样式 */
.container::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

.container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景色 */
  border-radius: 3px; /* 滚动条轨道圆角 */
}

.container::-webkit-scrollbar-thumb {
  background: #e4e4e4; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滚动条滑块圆角 */
}

.container::-webkit-scrollbar-thumb:hover {
  background: #b7b7b7; /* 滚动条滑块悬停颜色 */
}
</style>